<template>
  <div :id="idName" class="curve-content" />
</template>

<script>
export default {
  name: 'Index',
  props: {
    idName: {
      type: String,
      default: ''
    },
    xData: {
      type: Array,
      default: () => {
        return []
      }
    },
    yData: {
      type: Array,
      default: () => {
        return []
      }
    },
    legendColor: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    xData() {
      this.initEcharts()
    }
  },
  data() {
    return {
      myChart: {}
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const option = {
        // 图例
        legend: {
          data: ['日订单数'],
          icon: 'rect', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          x: 'right',
          itemGap: 50 // 图例间距
        },
        // 坐标轴间距
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // 图例颜色
        color: this.legendColor,
        // x轴数据
        xAxis: [{
          data: this.xData,
          type: 'category',
          // x轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(219,225,255,1)',
              width: 1,
              type: 'solid'
            }
          },
          // x轴文字的配置
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(0,0,0,1)'
            }
          },
          // 控制x轴上的间隔突出的小线条样式
          axisTick: {
            show: false // 显示与否
          }
        }],
        // y轴单位
        yAxis: {
          name: '个',
          // y轴上方单位的颜色
          nameTextStyle: {
            color: '#000'
          },
          // y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(219,225,255,1)',
              width: 1,
              type: 'solid'
            }
          },
          // y轴文字的配置
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(0,0,0,1)'
            }
          },
          // 控制y轴上的间隔突出的小线条样式
          axisTick: {
            show: false // 显示与否
          }
        },
        // 数据项
        series: [
          {
            name: '日订单数',
            data: this.yData,
            type: 'line',
            // 线条样式
            lineStyle: {
              width: 3
            },
            // 区域颜色
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(160,207,255, 0.5)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(64,158,255, 0)' // 100% 处的颜色
                }]
              }
            },
            smooth: true,
            symbolSize: '10', // 折线点大小
            label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: 16
              }
            }
          }
        ]
      }
      this.myChart = this.$echarts.init(document.getElementById(this.idName))
      this.myChart.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.curve-content {
  width: 100%;
  //height: 340px;
  height: 270px;
}
</style>
